<template>
  <div >
    <div  class='header'>

      <div id="btn2"  @click="$router.go(-1)" >返回</div>
     <input type="text" placeholder='目的地' id="input" />
    <button   id='btn'>查询</button>
    </div>
    <!-- 准备一个盛放地图的容器 -->
    <div id="container"    style="height:570px;border:0 solid black;"></div>  <!-- display: none;可使地图消失-->
    <div  id="d1"></div>
    
    <div  id="panel"></div>
    <p  id="p"></p>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
            securityJsCode:'6919bc46a60c5ab3b23c8b9f471fce4b',
        }
  export default {
    data() {
        return {
        }
    },
    mounted () {
       this.initMap() 
    },
    methods:{
    initMap(){
    let lng=113.651921
         let  lat=34.780068
        let elng
         let elat
         let place
         var place1
        p.innerHTML='郑州'
        AMapLoader.load({
            key:"b2579fccbbd194ba98fad36bc6f9010d",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.ToolBar',
        'AMap.Scale',
        'AMap.HawkEye',
        'AMap.MapType',
     'AMap.Geolocation',],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
           let map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D", 
                terrain:true,   //是否为3D地图模式
                zoom:10,           //初始化地图级别
                center:[lng,lat], //初始化地图中心点位置
            });
            //为当前地图添加实时路况图层
         var trafficLayer = new AMap.TileLayer.Traffic({
          zIndex: 8
           });
         map.add(trafficLayer);//添加图层到地图

         var marker = new AMap.Marker({
        position:[lng,lat]//位置
    })
        map.add(marker);//添加到地图

        map.addControl(new AMap.ToolBar({
        position:'LT',
        offset:[22,27]
    }));

    // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
    map.addControl(new AMap.Scale(  ));

    // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
    map.addControl(new AMap.HawkEye({isOpen:true,width:'100px',height:'100px',autoMove:true}));
   
    // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    map.addControl(new AMap.MapType(
        
    ))
   
    // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
   var geolocation = new AMap.Geolocation({
        position:'LB',
        offset:[15,60]
    })
    map.addControl(geolocation)
    AMap.plugin('AMap.Geolocation', function() {
   geolocation.getCurrentPosition(function (status,result) {
       console.log('当前定位:',result);
  });
    })
    // 加载AMao.CitySearch插件,查询当前城市名称
AMap.plugin('AMap.CitySearch', function () {
  var citySearch = new AMap.CitySearch()
  citySearch.getLocalCity(function (status, result) {
    // console.log(result);
  })
});
// 加载placeSearch插件,按照关键字搜索周边场所
AMap.plugin('AMap.PlaceSearch', function () {
    let searchobj=new  AMap.PlaceSearch({
        city:'郑州',
        pageSize: 20,
        pageIndex:1,
    })
    searchobj.search('电动汽车充电桩', function (status, result) {
   // 查询成功时，result即对应匹配的POI信息
   console.log(status, result);
});

})
   btn.onclick=function  get(){
            place=input.value
            p.innerHTML=place
            // 通过地点获取经纬度
AMap.plugin('AMap.Geocoder', function() {
  var geocoder = new AMap.Geocoder({
    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
    city: '郑州'
  })

  geocoder.getLocation(place, function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // result中对应详细地理坐标信息
      console.log("返回经纬度:",result);
      elng=result.geocodes[0].location.lng
      elat=result.geocodes[0].location.lat
        console.log(elng,elat);
        var startLngLat = [lng, lat]
var endLngLat = [elng, elat]
// 计算距离
var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
// 返回 p1 到 p2 间的地面距离，单位：米
var dis = AMap.GeometryUtil.distance(startLngLat,endLngLat);
console.log('dis:',(dis/1000).toFixed(2));
d1.innerHTML=(dis/1000).toFixed(2)

// 测试距离
AMap.plugin('AMap.Driving', function() {


var driving = new AMap.Driving({

// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
policy: AMap.DrivingPolicy.LEAST_TIME,
map: map,
   panel: 'panel',
})
driving.clear()
driving.search(startLngLat, endLngLat, function (status, result) {
    
   
// 未出错时，result即是对应的路线规划方案

})
}) 
  
    }
  })
  
 
})
    }
     }).catch(e=>{
            console.log('err',e);
        })

    },
    
    
},
    
  }
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
.header{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px 0;
    background-color:rgb(56,175,255) ;
}
#container{
        padding:0px;
        margin: 0px;
        width: 100%;
    }
    input{
        width: 220px;
        height: 30px;
        border-radius: 10px;
        border: black 0 solid;
        background-color: #eee;
    }
    #panel{
        width: 100%;
    }
    button{
        width: 60px;
        border-radius: 10px;
        border-style: none;
    }
    #p{
        background-color:rgb(56,175,255) ;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        line-height: 50px;
    }
</style>

